<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 屏蔽tomcat 自带的 EL表达式 -->
<%@ page isELIgnored="false" %>  
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <link rel="stylesheet" type="text/css" href="${ctx}/bootstrap/bootstrap.css" media="all">
	<link rel="stylesheet" type="text/css" href="${ctx}/bootstrap/bootstrap-table.css" media="all">
<%-- 	<link rel="stylesheet" type="text/css" href="${ctx}/larry/css/fonts/font-awesome.min.css" media="all"> --%>
	<script type="text/javascript" src="${ctx}/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/form.js"></script>
	<script type="text/javascript" src="${ctx}/layer/layer.js"></script>
	<script type="text/javascript" src="${ctx}/bootstrap/bootstrap.js"></script>
	<script type="text/javascript" src="${ctx}/bootstrap/bootstrap-table.js"></script>
	<script type="text/javascript" src="${ctx}/bootstrap/bootstrap-table-zh-CN.js"></script>

</head>
<body style="padding-top: 8px;">

	<div class="container-fluid">
			<div class="row-fluid">
				<div class="span12">
						<form role="form" id="searchform" class="form-horizontal">
								  <div class="form-group">
									    <label for="realName" class="col-sm-1 control-label">name</label>
									    <div class="col-sm-3"><input type="text" class="form-control" id="name" name="_EQ_name" placeholder="请输入name" ></div>
									    <label for="name" class="col-sm-1 control-label">email</label>
									    <div class="col-sm-3"><input type="text" class="form-control" id="email" name="_LIKE_email" placeholder="请输入email" ></div>
									    <label for="sex" class="col-sm-1 control-label">sex</label>
									    <div class="col-sm-3"><input type="text" class="form-control" id="sex" name="sex" placeholder="请输入sex"></div>
								  </div>
								 <div class="form-group">
									<div class="col-sm-offset-5 col-sm-6">
										<button id="btnsearch" type="button" class="btn  btn-green"><span class="glyphicon glyphicon-search"></span> 查询</button>
										<button id="btnreset" type="reset" class="btn  btn-red"><span class="glyphicon glyphicon-repeat"></span> 重置</button>
									</div>
								</div>
						</form>
						<table id="table"></table>
						<div id="toolbar" class="btn-group" role="group" >
						  <button type="button" class="btn btn-green"> <span class="glyphicon glyphicon-plus"></span> 新建</button>
						  <button id="btnEdit" type="button" class="btn btn-blue"><span class="glyphicon glyphicon-edit"></span> 编辑</button>
						  <button type="button" class="btn btn-orange"><span class="glyphicon glyphicon-List alt"></span> 查看</button>
						  <button type="button" class="btn btn-red"><span class="glyphicon glyphicon-Trash"></span> 删除</button>
						</div>
				</div>
			</div>
	</div>

<script>
	var userTable = $('#table').bootstrapTable({
					url: '${ctx}/user/userInfo/query',         //请求后台的URL（*）
		            method: 'post',                      //请求方式（*）
		            contentType:"application/x-www-form-urlencoded; charset=UTF-8",
		            toolbar: '#toolbar',                //工具按钮用哪个容器
		            striped: true,                      //是否显示行间隔色
		            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
		            pagination: true,                   //是否显示分页（*）
		            undefinedText:"",
		            sortable: false,                     //是否启用排序
		            sortOrder: "asc",                   //排序方式
		            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
		            queryParams: function(params) {
		            	var temp = $("#searchform").serializeJsonObject();
		            	var temp1 = {
		            		  pageNumber: params.pageNumber, //页码
	                          pageSize: params.limit
	                        }
		            	var object = $.extend({}, temp, temp1);
		            	return object;
	                },
		            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
		            search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，
		            paginationLoop:false,
		            strictSearch: false,
		            showColumns: true,                  //是否显示所有的列
		            showRefresh: true,                  //是否显示刷新按钮
		            minimumCountColumns: 2,             //最少允许的列数
		            clickToSelect: true,                //是否启用点击选中行
		            onClickRow:function(row, $element){
		            	$('.success').removeClass('success');//去除之前选中的行的，选中样式
		            	 $element.addClass('success');//添加当前选中的 success样式用于区别
		            	
		            },
		            height: document.body.clientHeight*0.95 - $("#searchform").height()>400?document.body.clientHeight*0.95 - $("#searchform").height():400,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
		            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
		            cardView: false,                    //是否显示详细视图
		            detailView: false,                  //是否显示父子表
		            columns: [ {
		                field: 'userId',
		                title: '用户Id',
		                align: 'center',
	  	                valign: 'middle',
	  	              	width: '100px',
		            }, {
		                field: 'email',
		                title: '邮箱地址',
		            }, {
		                field: 'name',
		                title: '名称'
		            }, {
		                field: 'realName',
		                title: '编号'
		            }, {
		                field: 'sex',
		                title: '性别'
		            }]
		  });
		 //查询按钮
		$('#btnsearch').click(function(){
			//userTable.bootstrapTable('refresh');  
			userTable.bootstrapTable('refreshOptions',{pageNumber : 1});  
			
		});
		$('#btnreset').click(function(){
			$('#searchform')[0].reset();
			userTable.bootstrapTable('refreshOptions',{pageNumber : 1});  
		});
		 //新建按钮 btnEdit功能
		 $('#btnEdit').click(function(){
			 var data = getData();
			 layer.open({
				  type: 2,
				  skin: 'layui-layer-molv',
				  title: data.name+"信息编辑",
				  shadeClose: true,
				  shade: 0.4,
				  area: ['90%', '90%'],
				  content: '${ctx}/user/userInfo/edit' //iframe的url
				});
		});
		 //获取当前行选中数据
		function getData(){
			 var index = $('#table').find('tr.success').data('index');
			 return $('#table').bootstrapTable('getData')[index];
		}
		 
		        
		        
		   
</script>
</body>
</html>
